<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>06_列表渲染</title>
</head>
<body>

<!--
1. 列表显示
  数组: v-for / index
  对象: v-for / key
2. 列表的更新显示
  删除item
  替换item
-->

<div id="demo">
  <h2>测试: v-for 遍历数组</h2>
  <ul>
    <li v-for="(item, index) in persons" :key="item.id">
      {{index}}--{{item.id}}--{{item.name}}--{{item.age}}
      --<button @click="deleteP(index)">删除</button>
      --<button @click="updateP(index, {id: item.id, name: 'xxxx', age: 22})">更新</button>
    </li>
  </ul>

  <h2>测试: v-for 遍历对象</h2>
  <ul>
    <li v-for="(value, key) in persons[1]" :key="key">
      {{key}}={{value}}
    </li>
  </ul>

</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  const vm = new Vue({
    el: '#demo',
    data: {
      persons: [
        {id: 1, name: 'A', age: 12},
        {id: 3, name: 'B', age: 11},
        {id: 5, name: 'D', age: 13},
        {id: 6, name: 'C', age: 10},
      ],
      xxx: {
        m: 1
      }
    },

    methods: {
      deleteP (index) {
        this.persons.splice(index, 1)
      },

      updateP (index, newP) {
        // this.persons[index] = newP  // 不可以
       
        // this.persons[index].name = newP.name
        // this.persons[index].age = newP.age
       
        this.persons.splice(index, 1, newP)
      }
    }
  })
  console.log(vm)

  /* 
  vue内部如何监视数据变化从而更新页面(数据绑定)
  1. 对象中的属性
    通过defineProerty给属性添加getter/setter来实现对属性数据的监视的
  2. 数组中的元素
    对数组中用于更新元素的一系列方法进行重写
      1. 调用数组原生的对应方法去更新元素
      2. 更新界面
    有限制: 只能通过重写的几个数组方法来更新元素, 如果直接通过下标更新元素界面不会更新
  */
</script>
</body>
</html>